import React, { useEffect, useRef, useState, useContext } from 'react'
import Image2DRenderView from '@/ImgView/Image2DRenderView';
import '@/index.css';

const Image2D = (props) => {
  const editor = useContext(window.EditorContext)
  const renderProxy = useContext(window.RenderProxyContext)
  const [view, setView] = useState({})
  const dom = useRef()
  // useEffect(() => {
  //   editor.pc.removeRenderView(view);
  //   renderProxy.removeView(view);
  //   view.destroy();
  // }, [])
  useEffect(() => {
    if (dom.current) {
      let config = editor.state.config;
      const renderView = new Image2DRenderView(dom.current, editor.pc, {
        name: `${config.imgViewPrefix}-${props.imgIndex}`,
        // name: `${config.imgViewPrefix}-0`,
        // name: '',
        // actions: [],
        actions: ['render-2d-shape'],
        proxy: renderProxy,
      })
      // view.renderBox = editor.state.config.projectMap3d;
      // view.renderRect = editor.state.config.projectPoint4;
      // view.renderBox2D = editor.state.config.projectPoint8;
      renderView.id = `${config.imgViewPrefix}-${props.imgIndex}`;
      // setView(renderView)
      // view.id = `${config.imgViewPrefix}-0`;
      editor.pc.addRenderView(renderView)
      // console.log(state, "state.imgViews");
      renderView.setOptions(props.state.imgViews[props.imgIndex]);
      renderView.renderPoints = false;
    }
  }, [dom.current])
  return (
    <div
      className='img-view'
      style={{
        borderColor: 'rgb(46, 37, 37)',
        aspectRatio: '1.78 / 1',
      }}
    >
      <div className='render' ref={dom}></div>
    </div>
  )
}

export default Image2D